<template>
  <view
    :class="{
      'product-vertical': direction === 'vertical',
      'product-horizontal': direction === 'horizontal',
    }"
  >
    <wd-img v-if="direction === 'vertical'" round radius="10" height="300rpx" :src="mainPic" />
    <wd-img
      v-if="direction === 'horizontal'"
      round
      radius="10"
      width="200rpx"
      height="200rpx"
      :src="mainPic"
    />
    <view class="product-desc">
      <view class="product-text">
        <wd-text
          :text="productName"
          :lines="2"
          size="28rpx"
          custom-style="
        height: 76rpx;"
        ></wd-text>
        <text>{{ productSpec }}</text>
        <text>{{ supplyPrice + '元' }}</text>
      </view>
      <view class="product-image" @click="handleClick">
        <view v-if="quantity > 0" class="shopcart-dot">
          {{ quantity }}
        </view>
        <wd-img width="30rpx" height="30rpx" src="/static/images/addCart.png"></wd-img>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useShopcartStore } from '@/store/shopcart'
import { cardProps } from './types'
import { usePopup } from '@/components/htm-popup/index'

const { direction, ...hotData } = defineProps(cardProps)
const { upcCode, productName, productSpec, mainPic, supplyPrice } = hotData

const shopcartStore = useShopcartStore()
const { showPopup } = usePopup()

const quantity = computed(() => shopcartStore.getSelectedQuantityById(upcCode))

const handleClick = () => {
  showPopup({
    ...hotData,
    quantity: quantity.value,
  })
}
</script>

<style lang="scss">
@import '/src/style/index';
.product-vertical {
  display: flex;
  flex-direction: column;
  width: calc(50vw - 24rpx - 10rpx);
  background: #ffffff;
  border-radius: 20rpx;
  .product-desc {
    position: relative;
    margin: 10rpx;
    .product-image {
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50rpx;
      height: 50rpx;
      background-color: var(--wot-color-theme);
      border-radius: 50rpx;
    }
    .product-text {
      text:nth-child(1) {
        margin-top: 8rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: black;
      }
      text:nth-child(2) {
        display: block;
        margin-top: 8rpx;
        font-size: 24rpx;
        color: red;
      }
      text:nth-child(3) {
        display: block;
        margin-top: 8rpx;
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}
.product-horizontal {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 25rpx;
  background: #ffffff;
  .product-desc {
    position: relative;
    width: calc(100% - 200rpx);
    margin: 10rpx;
    .product-image {
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50rpx;
      height: 50rpx;
      background-color: var(--wot-color-theme);
      border-radius: 50rpx;
    }
    .product-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      text:nth-child(1) {
        display: block;
        flex: 2;
        margin-top: -5rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: black;
      }
      text:nth-child(2) {
        display: block;
        margin-top: 5rpx;
        font-size: 24rpx;
        color: red;
      }
      text:nth-child(3) {
        display: block;
        margin-top: 5rpx;
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}

.product-horizontal {
  border-bottom: 1rpx solid $htm-divider-color;
}
.shopcart-dot {
  position: absolute;
  top: -12rpx;
  right: -12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25rpx;
  height: 25rpx;
  font-size: 20rpx;
  color: white;
  background-color: red;
  border: 1rpx solid #fff;
  border-radius: 50%;
}
</style>
